import './Done.css'
function Done(props){
  const {completeItem}=props
  return (
    <section className='Doing'>
      <h2 className='todo'>已完成 <span>{props.finished}</span></h2>
      <ul >
       {
          props.todos.map((item)=>{
            if(item.done==true){
              return <li className='finished' key={item.id}> <input checked={item.done} onChange={()=>{completeItem(item.id)}}  type="checkbox" name="" id="" /><span className='content'>{item.todo}</span><a onClick={
                (e)=>{
                  e.preventDefault()
                 
                  props.data(item.id)
                }
              } href="javascript;">-</a></li>
            }
            
          })  
       }
      </ul>
    </section>
  )
}
export default Done;